<template>
	<view class="performance_content">
		<view class="top_nav">
			<view class="left" @click="back()">
				<image src="../../static/img/arrow-left.png" mode=""></image>
				<p>我的绩效</p>
			</view>
			<view class="right"><navigator url="">起草</navigator></view>
		</view>
		<view class="footer">
			<view class="select_nav">
				<view class="">
					<select style="border: none;font-size: 28rpx;color: #101010;background-color: #eee;">
					<option v-for="(item1,index1) in options" :key="index1">{{ item1.label }}</option>
					</select>
				</view>
				<view class="">
					<select style="border: none;font-size: 28rpx;color: #101010;background-color: #eee;">
					<option v-for="(item2,index2) in optionsYear" :key="index2">{{ item2.label }}</option>
					</select>
				</view>
			</view>
			<!-- 折线图 -->
			<view class="chart"><line-chart ref="lineData2" canvasId="index_line_2" :dataAs="lineData2" /></view>
			<view class="list">
				<navigator url="./detail">
					<view class="item">
						<p class="score" style="color: #FF0000;font-size: 36rpx;font-weight: 600;">
							<span>90</span>
							<span style="font-size: 28rpx;margin-left: 10rpx;">分</span>
						</p>
						<p class="time">2020年7月</p>
					</view>
				</navigator>
				<navigator url="">
					<view class="item">
						<p class="score" style="color: #2EAE00;font-size: 36rpx;font-weight: 600;">
							<span>100</span>
							<span style="font-size: 28rpx;margin-left: 10rpx;">分</span>
						</p>
						<p class="time">2020年7月</p>
					</view>
				</navigator>
				<navigator url="">
					<view class="item">
						<p class="score" style="color: #007AFF;font-size: 36rpx;font-weight: 600;">
							<span>80</span>
							<span style="font-size: 28rpx;margin-left: 10rpx;">分</span>
						</p>
						<p class="time">2020年7月</p>
					</view>
				</navigator>
				<navigator url="">
					<view class="item">
						<p class="score" style="color: #007AFF;font-size: 36rpx;font-weight: 600;">
							<span>95</span>
							<span style="font-size: 28rpx;margin-left: 10rpx;">分</span>
						</p>
						<p class="time">2020年7月</p>
					</view>
				</navigator>
				<navigator url="">
					<view class="item">
						<p class="score" style="color: #007AFF;font-size: 36rpx;font-weight: 600;">
							<span>85</span>
							<span style="font-size: 28rpx;margin-left: 10rpx;">分</span>
						</p>
						<p class="time">2020年7月</p>
					</view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
import LineChart from '@/components/stan-ucharts/LineChart.vue';
export default {
	name: 'Index',
	components: {
		LineChart
	},
	data() {
		return {
			value: '',
			options: [
				{
					value: '选项1',
					label: '个人绩效'
				},
				{
					value: '选项2',
					label: '部门绩效'
				}
			],
			optionsYear: [
				{
					value: '选项1',
					label: '2020年'
				},
				{
					value: '选项2',
					label: '2021年'
				},
				{
					value: '选项3',
					label: '2022年'
				}
			],
			lineData2: {
				//数字的图--折线图数据background:'#FFFFFF',
				fontSize: 11,
				legend: { show: false },
				dataLabel: false,
				background: '#FFFFFF',
				animation: true,
				categories: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
				series: [{ name: '成交量A', data: [95, 108, 102, 109, 95, 90, 100] }]
			}
		};
	},
	mounted() {
		 let defaultOption = {
			 legend: {
			    show: false,
			}
		 }
	},
	methods: {
		back() {
			uni.navigateBack({ delta: 1 });
		}
	}
};
</script>

<style lang="less">
.no-data {
	width: 100%;
	height: 360upx;
	margin-top: 300upx;
	position: relative;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.no-data image {
	width: 200upx;
	height: 150upx;
	position: absolute;
	left: 36%;
}
.datas {
	width: 100%;
	height: 60upx;
	line-height: 60upx;
	text-align: center;
	position: absolute;
	top: 160upx;
	font-size: 28upx;
	color: #999;
}
.performance_content {
	width: 100%;
	height: 100%;
	.top_nav {
		width: 100%;
		height: 100rpx;
		background-color: #007aff;
		padding: 20rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;

		.left {
			display: flex;
			image {
				width: 58rpx;
				height: 58rpx;
			}
			p {
				color: #fff;
				font-size: 32rpx;
				margin: 7rpx 0 0 10rpx;
			}
		}
		.right {
			color: #fff;
			font-size: 32rpx;
			margin: 10rpx 15rpx 0 0;
		}
	}
	.footer {
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
		background-color: #eee;
		.select_nav {
			width: 100%;
			// height: 80rpx;
			display: flex;
			justify-content: space-between;
		}
		// 折线图
		.chart {
			width: 100%;
			height: 500rpx;
			border: 2rpx solid rgba(230, 230, 230, 1);
			margin: 30rpx 0;
			background-color: #fff;
		}
		.list {
			width: 100%;
			.item {
				width: 100%;
				height: 120rpx;
				border-radius: 8rpx;
				background-color: #fff;
				display: flex;
				justify-content: space-between;
				padding: 40rpx 50rpx;
				box-sizing: border-box;
				margin: 0 0 30rpx 0;
				.time {
					color: #101010;
					font-size: 30rpx;
				}
			}
		}
	}
}
</style>
